<template>
  <div class="filter-panel">
    <div class="filter-panel-item" v-for="item in list" :key="item.key">
      <div class="name">{{ item.name }}</div>
      <div class="con">
        <ul class="filter-list">
          <li
            v-for="(filterParamItem, subIndex) in filterParam[item.key]"
            :key="subIndex"
            class="filter-item"
            :class="{ active: activatedTag(`${item.key}-${subIndex}`, item.key) }"
            @click="onChooseTag(filterParamItem, item, `${item.key}-${subIndex}`)">
            <!-- 展示name -->
            <p class="filter-item-text">{{ filterParamItem.objName || filterParamItem.typeName }}</p>
          </li>
        </ul>
        <!-- 子模块 -->
        <template v-if="childListObj[item.key]?.length">
          <ul class="filter-list sub-filter-list" v-for="child in item.child" :key="child.key">
            <li
              v-for="(childItem, index1) in childListObj[item.key]"
              :key="`${child.key}-${index1}`"
              class="filter-item"
              :class="{ active: activatedTag(`${child.key}-${index1}`, child.key) }"
              @click="onChooseTag(childItem, child, `${child.key}-${index1}`)">
              <!-- 展示name -->
              <p class="filter-item-text">{{ childItem.classifyName || childItem.objName }}</p>
            </li>
          </ul>
        </template>
      </div>
    </div>
    <div class="btn-group">
      <van-button type="default" size="small" @click="onClearTags">重置</van-button>
      <van-button type="danger" size="small" color="#d81e06" @click="search">确定</van-button>
    </div>
  </div>
</template>
<script>
import { getSelectParam } from '@api/api-task.js'

export default {
  name: 'TaskFilterPanel',
  components: {},
  props: {},
  data() {
    return {
      filterTags: [],
      chooseFilterData: {},
      filterParam: {},
      childList: [],
      list: [
        {
          key: 'taskType',
          name: '任务类型',
          child: [
            {
              key: 'taskClassifyVOS',
              name: '任务分类',
            },
          ],
        },
        {
          key: 'taskStatus',
          name: '任务状态',
        },
        /* {
          key: 'taskType',
          name: '评价结果',
        }, */
        {
          key: 'cycleCfgVOS',
          name: '反馈周期',
        },
        {
          key: 'assessmentCycle',
          name: '考核周期',
        },
        {
          key: 'assessmentCoefficient',
          name: '考核系数',
        },
        {
          key: 'evaluationState',
          name: '评价状态',
        },
        {
          key: 'orgIds',
          name: '机构信息',
          child: [
            {
              key: 'children',
              name: '人员信息',
            },
          ],
        },
      ],
      childListObj: {},
    }
  },
  computed: {
    activatedTag() {
      return (data, key) => {
        let active = false
        const chooseFilterData = this.chooseFilterData[key]
        if (chooseFilterData && JSON.stringify(chooseFilterData) !== '{}') {
          if (chooseFilterData.index === data) {
            active = true
          } else {
            active = false
          }
        }
        return active
      }
    },
  },
  watch: {},
  created() {
    this.initChooseFileterData(this.list)
    this.initdata()
  },
  mounted() {},
  methods: {
    /* 查询筛选项 */
    async initdata() {
      const { data = {} } = await getSelectParam()
      this.filterParam = { ...data }
    },
    /* 初始化chooseFilterData */
    initChooseFileterData(arr) {
      arr.forEach(item => {
        this.$set(this.chooseFilterData, item.key, {})
        // this.chooseFilterData[item.key] = JSON.parse(JSON.stringify({}))
        if (item.child) {
          this.initChooseFileterData(item.child)
        }
      })
    },
    /* 筛选项点击 */
    onChooseTag(item, listItem, _index) {
      this.getChooseFilterData(item, listItem, _index)
    },
    /* 获取选中数据 */
    getChooseFilterData(item, { key, name, child }, _index) {
      if (child && child.length) {
        const childKey = child[0].key
        delete this.chooseFilterData[childKey]
        // 存储所有子数据
        this.childListObj[key] = item[childKey]
      }
      // console.log(item)
      // 处理数据
      const obj = {
        index: _index,
        key: key,
        keyName: name,
        id: '',
        name: '',
      }
      obj.id = item.taskType || item.objId || item.taskClassify
      obj.name = item.typeName || item.objName || item.classifyName
      // console.log(obj)
      // 存入选中数据
      this.$set(this.chooseFilterData, key, Object.assign(item, obj))
      // this.chooseFilterData[key] = Object.assign(item, obj)
    },
    /* 清空筛选 */
    onClearTags() {
      this.initChooseFileterData(this.list)
      this.search()
    },
    /* 抛出数据 */
    search() {
      this.$emit('search', this.chooseFilterData)
    },
  },
}
</script>
<style lang="scss" scoped>
.filter-panel {
  // position: relative;
  max-height: 60vh;
  overflow-y: auto;
  padding: px2rem(30) px2rem(30) px2rem(120);
  .filter-panel-item {
    border-bottom: 1px solid #f7f8fa;
    .name {
      margin: px2rem(22) 0;
      font-size: $fontSize28;
      color: #323233;
    }
    .con {
      .filter-list {
        display: flex;
        flex-wrap: wrap;
      }
      .filter-item {
        background: #f7f8fa;
        display: inline-flex;
        align-items: center;
        min-width: px2rem(80);
        margin: 0 px2rem(15) px2rem(15) 0;
        font-size: $fontSize26;
        line-height: px2rem(28);
        vertical-align: middle;
        color: #323233;
        .filter-item-text {
          margin: px2rem(16);
          width: 100%;
          text-align: center;
        }
        &.active {
          background: #ffe1e1;
          .filter-item-text {
            color: #d81e06;
          }
        }
      }
      .sub-filter-list {
        display: flex;
        width: 100%;
      }
    }
  }
  .btn-group {
    position: absolute;
    display: flex;
    justify-content: space-around;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    padding: px2rem(20);
    .van-button {
      width: 48%;
    }
  }
}
</style>
